<script lang="ts" setup>
// #region 引入包, 函数和组件
import { reactive } from 'vue'
import { ElMessage, type FormRules } from 'element-plus'
import type { Pop } from './ListTable.vue'
import { createUserApi, updateUserApi } from '@/service' // 添加接口和编辑接口
import type { QuertListItem } from '@/service/type'

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
interface Emits {
  queryList: []
}
const emits = defineEmits<Emits>()
// #endregion

// #region // 变量
const data = defineModel<Pop>('data') // 数据
const rules = reactive<FormRules<QuertListItem>>({
  // 表单验证规则
  username: [{ required: true, message: '用户名为必填项! 不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码为必填项! 不能为空', trigger: 'blur' }],
  age: [{ required: true, message: '年龄为必填项! 不能为空', trigger: 'blur' }],
  sex: [{ required: true, message: '性别为必填项! 不能为空', trigger: 'blur' }],
  email: [{ required: true, message: '邮箱为必填项! 不能为空', trigger: 'blur' }],
})
// #endregion

// #region // 函数
// 添加接口
const add = async () => {
  try {
    if (data.value) {
      const res = await createUserApi(data.value.data!)
      console.log(res)
      if (!res.data.code) {
        ElMessage({
          type: 'success',
          plain: true,
          message: res.data.msg,
        })
      } else {
        ElMessage({
          type: 'warning',
          plain: true,
          message: res.data.msg,
        })
      }
    }
  } catch (error) {
    console.log(error)
  }
}
// 编辑接口
const edit = async () => {
  try {
    console.log(data.value)
    if (data.value) {
      const res = await updateUserApi(data.value.data!)
      console.log(res)
      if (!res.data.code) {
        ElMessage({
          type: 'success',
          plain: true,
          message: res.data.msg,
        })
      } else {
        ElMessage({
          type: 'warning',
          plain: true,
          message: res.data.msg,
        })
      }
    }
  } catch (error) {
    console.log(error)
  }
}
// 点击确认后
const submit = () => {
  // 关闭弹窗
  if (data.value) {
    console.log('确认了')
    data.value.show = false
    if (data.value.title === '添加用户') {
      // 调添加接口
      add()
    } else if (data.value.title === '编辑用户') {
      // 调编辑接口
      console.log(data.value.data)
      edit()
    }
    emits('queryList')
  }
}
// #endregion

// #region // 生命周期和vue函数
// watch()
// #endregion
</script>

<template>
  <el-dialog
    v-if="data && data.data"
    v-model="data.show"
    :title="data.title"
    width="500"
    ref="popRef"
    lock-scroll
    :destroy-on-close="true"
  >
    <el-form label-width="auto" :model="data.data" :rules :status-icon="true">
      <el-form-item label="用户名: " prop="username">
        <el-input v-model.trim="data.data.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码: " prop="password">
        <el-input v-model.trim="data.data.password" show-password placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="年龄: " prop="age">
        <el-input v-model.trim.number="data.data.age" type="number" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="性别: " prop="sex">
        <el-select v-model="data.data.sex" placeholder="请选择性别">
          <el-option label="男" :value="1" />
          <el-option label="女" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱: " prop="email">
        <el-input v-model.trim="data.data.email" type="email" placeholder="请输入邮箱" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.show = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
